<template>
    <div>
        <el-form :model="form" ref="form" label-width="100px">
            <el-form-item label="序列号" prop="serial" :rules="{ required: true, message: '序列号不能为空', trigger: 'blur' }">
                <el-input v-model.trim="form.serial" auto-complete="off" placeholder="请输入设备序列号" clearable></el-input>
            </el-form-item>
            <el-form-item label="型号" prop="model">
                <el-input v-model="form.model" auto-complete="off" placeholder="请输入设备型号" clearable></el-input>
            </el-form-item>
            <el-form-item label="设备名" prop="name">
                <el-input v-model="form.name" auto-complete="off" placeholder="请输入设备名" clearable></el-input>
            </el-form-item>
            <el-form-item label="分类" prop="category_id" :rules="{ required: true, message: '分类不能为空', trigger: 'blur' }">
                <el-select v-model="form.category_id" placeholder="请选择设备分类" filterable clearable>
                    <el-option v-for="category in categoryList" :key="category.id" :label="category.type + ' ' + category.name" :value="category.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门" prop="department_id" :rules="{ required: true, message: '部门不能为空', trigger: 'blur' }">
                <el-cascader
                    v-model="form.department_id"
                    :options="departmentList"
                    :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
                    placeholder="请选择部门"
                    clearable
                    filterable
                ></el-cascader>
                <!-- <el-select v-model="form.department_id" placeholder="请选择设备分类" filterable clearable> -->
                <!-- <el-option v-for="department in departmentList" :key="department.id" :label="department.name" :value="department.id"></el-option> -->
                <!-- </el-select> -->
            </el-form-item>
            <el-form-item label="标识" prop="identify">
                <el-input v-model="form.identify" auto-complete="off" placeholder="请输入设备标识" clearable></el-input>
            </el-form-item>
            <el-form-item
                label="IP地址"
                prop="ip"
                :rules="{
                    pattern: /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/g,
                    message: 'IP地址格式不正确',
                    trigger: 'blur'
                }"
            >
                <el-input v-model="form.ip" auto-complete="off" placeholder="请输入设备IP地址" clearable></el-input>
            </el-form-item>
            <el-form-item
                label="MAC地址"
                prop="mac"
                :rules="{ pattern: /((([a-f0-9]{2}:){5})|(([a-f0-9]{2}-){5}))[a-f0-9]{2}/gi, message: 'MAC地址格式不正确', trigger: 'blur' }"
            >
                <el-input v-model="form.mac" auto-complete="off" placeholder="请输入设备MAC地址" clearable></el-input>
            </el-form-item>
            <!-- <el-form-item label="保修开始" prop="begin">
                <el-date-picker
                    type="date"
                    v-model="form.begin"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择保修开始日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="保修截止" prop="end">
                <el-date-picker
                    type="date"
                    v-model="form.end"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择保修截止日期"
                ></el-date-picker>
            </el-form-item>-->
            <el-form-item label="设备保修信息">
                <el-date-picker
                    v-model="guarantee"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="截止日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" auto-complete="off" placeholder="请输入备注信息" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit('form')">保 存</el-button>
                <el-button @click="$router.push({ name: 'deviceList' })">返 回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    props: { id: null },
    data() {
        return {
            form: {
                serial: null,
                name: null,
                model: null,
                identify: null,
                ip: null,
                mac: null,
                begin: '',
                end: '',
                remark: null,
                category_id: null,
                department_id: null
            }
        }
    },
    computed: {
        guarantee: {
            get() {
                return [this.form.begin || '', this.form.end || '']
            },
            set(newValue) {
                ;[this.form.begin = '', this.form.end = ''] = newValue || []
            }
        },
        categoryList() {
            return this.$store.getters.categoryDNList
        },
        departmentList() {
            return this.$store.getters.departmentList
        }
    },
    async created() {
        // const [categoryListRes, departmentListRes] = await Promise.all([this.$http.get('/categoryDNList'), this.$http.get('/departmentList')])
        // if (categoryListRes && categoryListRes.code === 0) {
        //     this.categoryList = categoryListRes.returnObject
        // }
        // if (departmentListRes && departmentListRes.code === 0) {
        //     this.departmentList = departmentListRes.returnObject
        // }
        // const [categoryListRes, departmentListRes] = await this.$http.all([this.$http.get('/categoryDNList'), this.$http.get('/departmentList')])
        // this.$http.all([this.$http.get('/categoryDNList'), this.$http.get('/departmentList')])
        // .then(
        //     this.$http.spread((acct, perms) => {
        //         console.log(acct, perms)
        //     })
        // )
        this.id && this.fetch()
    },
    methods: {
        async fetch() {
            const response = await this.$http.get(`/device/${this.id}`)
            if (response && response.code === 0) {
                this.form = response.returnObject
            }
        },
        submit(formName) {
            this.$refs[formName].validate(async valid => {
                if (!valid) return false
                if (this.id) {
                    const response = await this.$http.put(`/device/${this.id}`, this.form)
                    if (response && response.code === 0) {
                        this.$message.success('修改成功')
                        this.$router.push({ name: 'deviceList' })
                    }
                } else {
                    const res = await this.$http.post('/device', this.form)
                    if (res && res.code === 0) {
                        this.$message.success('添加成功')
                        this.$router.push({ name: 'deviceList' })
                    }
                }
            })
        }
    }
}
</script>

<style scoped></style>
